<template>
  <AsideStep :detail-data="props.detailData" />

  <el-descriptions
    class="global-descriptions"
    title="基本信息"
    :column="1"
    border
  >
    <el-descriptions-item label="渠道商">
      <ProfilePanel
        v-if="props.detailData.user"
        :avatar="props.detailData.user.avatar"
        :nickname="props.detailData.user.nickname"
        :remark="props.detailData.user.remark"
      />
    </el-descriptions-item>
    <el-descriptions-item label="订单状态">
      <el-tag v-if="props.detailData.isAppealed" type="danger">已售后</el-tag>
      <PipeTags v-else type="order" :state="props.detailData.state" />
    </el-descriptions-item>
    <el-descriptions-item label="订单类型">
      <PipeTags type="order-type" :state="props.detailData.type" />
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      {{ props.detailData.remark }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="分销奖励"
    :column="1"
    border
  >
    <el-descriptions-item
      :label="props.detailData.type === '1' ? '付款金额(元)' : '消费积分'"
    >
      <PipeMoney
        v-if="props.detailData.money"
        :type="props.detailData.type"
        :money="props.detailData.money"
      />
    </el-descriptions-item>
    <el-descriptions-item label="会员现金返佣">
      <PipeMoney
        v-if="props.detailData.userCash"
        type="1"
        :money="props.detailData.userCash"
      />
    </el-descriptions-item>
    <el-descriptions-item label="直属上级现金奖励">
      <PipeMoney
        v-if="props.detailData.firstCash"
        type="1"
        :money="props.detailData.firstCash"
      />
    </el-descriptions-item>
    <el-descriptions-item label="直属上级奖励">
      <PipeMoney
        v-if="props.detailData.firstAward"
        :type="props.detailData.type === '1' ? '2' : '1'"
        :money="props.detailData.firstAward"
      />
    </el-descriptions-item>
    <el-descriptions-item label="上上级奖励">
      <PipeMoney
        v-if="props.detailData.secondAward"
        :type="props.detailData.type === '1' ? '2' : '1'"
        :money="props.detailData.secondAward"
      />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="支付平台"
    :column="1"
    border
  >
    <el-descriptions-item label="平台终端">
      <PipeTags type="order-type-apply" :state="props.detailData.typeApply" />
    </el-descriptions-item>
    <el-descriptions-item label="付款方式">
      <PipeTags type="order-type-pay" :state="props.detailData.typePay" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="订单号"
    :column="1"
    border
  >
    <el-descriptions-item label="订单编号">
      {{ props.detailData.orderNo }}
    </el-descriptions-item>
    <el-descriptions-item label="订单UUID">
      {{ props.detailData.ownId }}
    </el-descriptions-item>
    <el-descriptions-item label="微信内部单号">
      {{ props.detailData.orderApply }}
    </el-descriptions-item>
    <el-descriptions-item label="微信预支付号">
      {{ props.detailData.wxappPrepayId }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="时间线"
    :column="1"
    border
  >
    <el-descriptions-item label="会员下单时间">
      <PipeDatetime :value="props.detailData.createTime" />
    </el-descriptions-item>
    <el-descriptions-item label="会员取消时间">
      <PipeDatetime :value="props.detailData.cancelTime" />
    </el-descriptions-item>
    <el-descriptions-item label="会员支付时间">
      <PipeDatetime :value="props.detailData.payTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台发货时间">
      <PipeDatetime :value="props.detailData.sendTime" />
    </el-descriptions-item>
    <el-descriptions-item label="会员收货时间">
      <PipeDatetime :value="props.detailData.takeTime" />
    </el-descriptions-item>
    <el-descriptions-item label="订单完成时间">
      <PipeDatetime :value="props.detailData.completeTime" />
    </el-descriptions-item>
    <el-descriptions-item label="会员售后时间">
      <PipeDatetime :value="props.detailData.appealTime" />
    </el-descriptions-item>
    <el-descriptions-item label="收益结算时间">
      <PipeDatetime :value="props.detailData.settledTime" />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import {
  PropType
  // reactive,
  // ref,
  // watch
} from 'vue';
// import { GetLabelByStateOptions } from '@/utils/common';

import AsideStep from './aside-step.vue';

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.order.EntitySchema>,
    default: () => ({})
  }
});

// watch(
//   () => props.detailData,
//   (val) => {
//     if (!val) return;
//     stepData.value = useGetStepData(val);
//     console.log('stepData.value', stepData.value);
//   }
// );
</script>

<style lang="scss" scoped>
.global-descriptions {
  margin-top: 16px;
}
</style>
